<template>
  <div class="home">
    <el-container class="hei">
      <el-aside>
        <div class="LBox1">
          <el-carousel @change="carouselChange" :initial-index="2" trigger="click" arrow="never" :loop="true"
            direction="vertical" indicator-position="none" :interval="2000" height="220px" ref="remarkCarousel">
            <el-carousel-item>
              <div class="gird1">
                <p>消防总览</p>
                <ul>
                  <li v-for="item in gird1liArr" :key="item.id">
                    <span>
                      <svg class="icon" aria-hidden="true">
                        <use :xlink:href="item.icon"></use>
                      </svg>
                    </span>
                    <span v-text="item.name"></span>
                    <span v-text="item.num"></span>
                  </li>
                </ul>
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div class="gird2">
                <p>联网单位总览</p>
                <ul>
                  <li v-for="item in gird2liArr" :key="item.id">
                    <span v-text="item.num"></span>
                    <span v-text="item.name"></span>
                  </li>
                </ul>
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div class="gird1">
                <p>消防总览</p>
                <ul>
                  <li v-for="item in gird1liArr" :key="item.id">
                    <span>
                      <svg class="icon" aria-hidden="true">
                        <use :xlink:href="item.icon"></use>
                      </svg>
                    </span>
                    <span v-text="item.name"></span>
                    <span v-text="item.num"></span>
                  </li>
                </ul>
              </div>
            </el-carousel-item>
            <el-carousel-item>
              <div class="gird2">
                <p>联网单位总览</p>
                <ul>
                  <li v-for="item in gird2liArr" :key="item.id">
                    <span v-text="item.num"></span>
                    <span v-text="item.name"></span>
                  </li>
                </ul>
              </div>
            </el-carousel-item>

          </el-carousel>

          <ul class="el-carousel__indicators el-carousel__indicators--horizontal">
            <li :class="index === indexActive ? 'is-active' : ''"
              class="el-carousel__indicator el-carousel__indicator--horizontal" v-for="index in 4" :key="index"
              @click="handleCarousel(index)">
              <button class="el-carousel__button"></button>
            </li>
          </ul>
          <!-- 边框四角样式 -->
          <div class="horn">
            <div class="lt"></div>
            <div class="rt"></div>
            <div class="rb"></div>
            <div class="lb"></div>
          </div>
        </div>
        <div class="LBox2">
          <el-carousel trigger="click" height="220px" arrow="never">
            <el-carousel-item>
              <p>设备总状态</p>
              <LeftPie1></LeftPie1>
            </el-carousel-item>
            <el-carousel-item>
              <p>火灾自动报警系统</p>
              <LeftPie2></LeftPie2>
            </el-carousel-item>
            <el-carousel-item>
              <p>消防水监测系统</p>
              <LeftPie3></LeftPie3>
            </el-carousel-item>
            <el-carousel-item>
              <p>智慧用电安全系统</p>
              <LeftPie4></LeftPie4>
            </el-carousel-item>
          </el-carousel>
          <div class="horn">
            <div class="lt"></div>
            <div class="rt"></div>
            <div class="rb"></div>
            <div class="lb"></div>
          </div>
        </div>
        <div class="LBox3">
          <el-carousel trigger="click" height="220px" arrow="never">
            <el-carousel-item>
              <p>部门/单位报警排名（TOP5）</p>
              <LeftBar1></LeftBar1>
            </el-carousel-item>
            <el-carousel-item>
              <p>设备报警排名（TOP5）</p>
              <LeftBar2></LeftBar2>
            </el-carousel-item>
            <el-carousel-item>
              <p>报警高发时段排名（TOP5）</p>
              <LeftBar3></LeftBar3>
            </el-carousel-item>
          </el-carousel>
          <div class="horn">
            <div class="lt"></div>
            <div class="rt"></div>
            <div class="rb"></div>
            <div class="lb"></div>
          </div>
        </div>
      </el-aside>
      <el-container>
        <el-main>
          <TopSeries></TopSeries>
        </el-main>
        <el-footer>
          <DownSeries></DownSeries>
        </el-footer>
      </el-container>
      <el-aside width="400px">
        <div class="RBoxl">
          <p>消防报警趋势</p>
          <RightBar1></RightBar1>
          <div class="horn">
            <div class="lt"></div>
            <div class="rt"></div>
            <div class="rb"></div>
            <div class="lb"></div>
          </div>
        </div>
        <div class="RBox2">
          <p>隐患整改趋势</p>
          <RightBar2></RightBar2>
          <div class="horn">
            <div class="lt"></div>
            <div class="rt"></div>
            <div class="rb"></div>
            <div class="lb"></div>
          </div>
        </div>
        <div class="RBox3">
          <p>工作趋势/及时率</p>
          <RightBar3></RightBar3>
          <div class="horn">
            <div class="lt"></div>
            <div class="rt"></div>
            <div class="rb"></div>
            <div class="lb"></div>
          </div>
        </div>
      </el-aside>
    </el-container>
  </div>
</template>

<script>
import '@/assets/comprehensiveIcon/iconfont';
import LeftPie1 from '@/components/Comprehensive/LeftPie1.vue';
import LeftPie2 from '@/components/Comprehensive/LeftPie2.vue';
import LeftPie3 from '@/components/Comprehensive/LeftPie3.vue';
import LeftPie4 from '@/components/Comprehensive/LeftPie4.vue';
import LeftBar1 from '@/components/Comprehensive/LeftBar1.vue';
import LeftBar2 from '@/components/Comprehensive/LeftBar2.vue';
import LeftBar3 from '@/components/Comprehensive/LeftBar3.vue';
import RightBar1 from '@/components/Comprehensive/RightBar1.vue';
import RightBar2 from '@/components/Comprehensive/RightBar2.vue';
import RightBar3 from '@/components/Comprehensive/RightBar3.vue';
import TopSeries from '@/components/Comprehensive/TopSeries.vue';
import DownSeries from '@/components/Comprehensive/DownSeries.vue';

export default {
  name: 'ComprehensiveSituational',
  components: {
    LeftBar1,
    LeftPie1,
    LeftPie2,
    LeftPie3,
    LeftPie4,
    LeftBar2,
    LeftBar3,
    RightBar1,
    RightBar2,
    RightBar3,
    TopSeries,
    DownSeries
  },
  data: function () {
    return {
      gird1liArr: [
        { id: 0, icon: '#icon-alarm', name: '当日警报数', num: 3 },
        { id: 1, icon: '#icon-fire', name: '当日警情数', num: 1 },
        { id: 2, icon: '#icon-shebeiguzhang', name: '当日故障数', num: 3 },
        { id: 3, icon: '#icon-fault', name: '当日离线数', num: 0 }
      ],
      gird2liArr: [
        { id: 0, name: '联网设备数', num: 120 },
        { id: 1, name: '联网单位数', num: 8 },
        { id: 2, name: '重点单位数', num: 3 },
        { id: 3, name: '单位场所数', num: 5 },
        { id: 4, name: '真实报警数', num: 2 },
        { id: 5, name: '真实火灾数', num: 0 }
      ],
      indexActive: 2
    }
  },
  methods: {
    carouselChange: function (index) {
      // console.log(index);
      index === 4 ? this.indexActive = 2 : index === 0 ? this.indexActive = 2 : index === 1 ? this.indexActive = 3 : this.indexActive = index
      // console.log(this.indexActive);
    },
    handleCarousel: function (index) {
      // console.log(index);
      this.$refs.remarkCarousel.setActiveItem(index);
    }
  }
}
</script>

<style scoped lang="less">
.icon {
  width: 2vmax;
  height: 2vmax;
  vertical-align: -0.15vmax;
  fill: currentColor;
  overflow: hidden;
}

.boxStyle {
  //盒子样式
  margin-left: 4%;
  width: 90%;
  height: 30%;
  color: #fff;
  text-align: center;
  background-color: #294776;
  position: relative;
  z-index: 10;
}

.borderStyle {

  //边框样式
  .horn {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    border: 1px solid #1475eb;
    box-shadow: 0 0 0 2px #294776 inset;
  }

  .horn>div {
    width: 10px;
    height: 10px;
    position: absolute;
  }

  .horn .lt {
    border-top: 1px solid #33d5e9;
    border-left: 1px solid #33d5e9;
    left: -1px;
    top: -1px;
  }

  .horn .rt {
    border-top: 1px solid #33d5e9;
    border-right: 1px solid #33d5e9;
    right: -1px;
    top: -1px;
  }

  .horn .rb {
    border-bottom: 1px solid #33d5e9;
    border-right: 1px solid #33d5e9;
    right: -1px;
    bottom: -1px;
  }

  .horn .lb {
    border-bottom: 1px solid #33d5e9;
    border-left: 1px solid #33d5e9;
    left: -1px;
    bottom: -1px;
  }
}

.home {
  position: relative;
  height: 100%;
  min-width: 1500px;
  min-height: 740px;
  width: calc(100vw - 17px);
  background-color: #082c61;
  background-size: cover;

  &:after {
    position: absolute;
    top: 0px;
    left: 15%;
    content: '';
    width: 76%;
    height: 86.5%;
    background-image: url(@/assets/images/backPic.png);
    background-size: cover;
    border-radius: 50% 50%;
    box-shadow: 0 0 50px 50px #082c61 inset;
    z-index: 1;
  }

  .LBox1 {
    //消防总览
    .boxStyle;
    .borderStyle;

    p {
      font-size: 100%;
      margin-top: 5%;
    }

    .el-carousel {
      height: 100%;
    }

    .el-carousel__indicators {
      // 指示器
      width: 30%;
      height: 10%;
      bottom: 7%;
      right: 50%;



      .el-carousel__indicator:nth-child(1),
      .el-carousel__indicator:nth-child(4) {
        display: none;
      }

      .el-carousel__indicator {
        width: 18%;
        height: 90%;
        padding: 0;

        .el-carousel__button {
          // 指示器按钮
          width: 50%;
          height: 50%;
          border: none;
          border-radius: 50%;
          background-color: #ffffff;
        }

      }

      /deep/ .is-active .el-carousel__button {
        // 指示器激活按钮
        background-color: #00ffff;
      }

    }

    .gird1 {
      width: 100%;
      height: 100%;

      ul {
        width: 100%;
        height: 50%;
        display: flex;
        justify-content: space-around;
        align-items: flex-start;

        li {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 20%;
          height: 100%;

          span:first-child {
            width: 3vw;
            height: 3vw;
            border: 2px solid #33d5e9;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 5%;
          }

          span:nth-child(2) {
            font-size: 12px;
          }

          span:last-child {
            color: #33d5e9;
          }
        }
      }
    }

    .gird2 {
      height: 100%;

      ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        margin-top: 2%;

        li {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          list-style: none;
          width: 29%;
          height: 60%;
          margin-top: 2%;
          border: 2px solid #33d5e9;
          border-radius: 4px;
          box-shadow: 0px 0px 5px #33d5e9 inset;

          span:first-child {
            color: #33d5e9;
            font-weight: bold;
          }

          span:last-child {
            font-size: 12px;
          }
        }
      }
    }
  }

  .LBox2 {
    //系统状态
    .boxStyle;
    .borderStyle;

    p {
      margin-top: 5%;
      font-size: 1vw;
    }

    .el-carousel,
    .el-carousel--horizontal {
      width: 100%;
      height: 100%;

      .el-carousel__container {
        width: 100%;
        height: 100%;
      }
    }

    /deep/ .el-carousel__indicators {
      // 指示器
      width: 30%;
      height: 10%;
      bottom: 7%;
      right: 50%;

      .el-carousel__indicator {
        width: 18%;
        height: 90%;
        padding: 0;

        .el-carousel__button {
          // 指示器按钮
          width: 50%;
          height: 50%;
          border: none;
          border-radius: 50%;
          background-color: #ffffff;
        }
      }

      .is-active .el-carousel__button {
        // 指示器激活按钮
        background-color: #00ffff;
      }

    }
  }

  .LBox3 {
    //报警排名
    .boxStyle;
    .borderStyle;

    p {
      margin-top: 20px;
    }

    .el-carousel,
    .el-carousel--horizontal {
      width: 100%;
      height: 100%;

      .el-carousel__container {
        width: 100%;
        height: 100%;
      }
    }

    /deep/ .el-carousel__indicators {
      // 指示器
      width: 30%;
      height: 10%;
      // 指示器
      bottom: 5%;
      right: 50%;

      .el-carousel__indicator {
        padding: 0px 5px;

        .el-carousel__button {
          // 指示器按钮
          width: 10px;
          height: 10px;
          border: none;
          border-radius: 50%;
          background-color: #ffffff;
        }
      }

      .is-active .el-carousel__button {
        // 指示器激活按钮
        background-color: #00ffff;
      }

    }
  }

  .RBoxl {
    //消防报警趋势
    .boxStyle;
    .borderStyle;

    p {
      margin-top: 5%;
      font-size: 1vw;
    }
  }

  .RBox2 {
    //系统状态
    .boxStyle;
    .borderStyle;

    p {
      margin-top: 5%;
      font-size: 1vw;
    }
  }

  .RBox3 {
    //系统状态
    .boxStyle;
    .borderStyle;

    p {
      margin-top: 5%;
      font-size: 1vw;
    }
  }
}

.el-footer {
  position: relative;
  border: 0;
}

.hei {
  height: 100%;
}

.el-aside {
  width: 26% !important;
  overflow-x: hidden;
  min-height: 736px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.el-main {
  position: relative;
  z-index: 999;
}

body>.el-container {
  margin-bottom: 40px;
}
</style>